<template>
  <view class="settings-container">
    <!-- 账号安全设置 -->
    <view class="settings-group">
      <view class="group-title">账号安全</view>
      <view class="settings-list">
        <view class="settings-item" @click="navigateTo('password')">
          <text>修改密码</text>
          <view class="item-right">
            <text class="desc">建议定期更换</text>
            <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          </view>
        </view>
        <view class="settings-item" @click="navigateTo('phone')">
          <text>手机号码</text>
          <view class="item-right">
            <text class="desc">138****8888</text>
            <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          </view>
        </view>
        <view class="settings-item" @click="navigateTo('email')">
          <text>邮箱绑定</text>
          <view class="item-right">
            <text class="desc">未绑定</text>
            <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 隐私设置 -->
    <view class="settings-group">
      <view class="group-title">隐私设置</view>
      <view class="settings-list">
        <view class="settings-item">
          <text>相册可见性</text>
          <view class="item-right">
            <u-switch v-model="privacySettings.albumPrivate"></u-switch>
          </view>
        </view>
        <view class="settings-item">
          <text>允许分享我的照片</text>
          <view class="item-right">
            <u-switch v-model="privacySettings.allowShare"></u-switch>
          </view>
        </view>
        <view class="settings-item">
          <text>照片水印</text>
          <view class="item-right">
            <u-switch v-model="privacySettings.watermark"></u-switch>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 存储设置 -->
    <view class="settings-group">
      <view class="group-title">存储设置</view>
      <view class="settings-list">
        <view class="settings-item">
          <text>自动备份</text>
          <view class="item-right">
            <u-switch v-model="storageSettings.autoBackup"></u-switch>
          </view>
        </view>
        <view class="settings-item" @click="navigateTo('storage')">
          <text>存储空间</text>
          <view class="item-right">
            <text class="desc">已用 2.5GB/10GB</text>
            <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          </view>
        </view>
        <view class="settings-item" @click="clearCache">
          <text>清除缓存</text>
          <view class="item-right">
            <text class="desc">256MB</text>
            <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 通知设置 -->
    <view class="settings-group">
      <view class="group-title">通知设置</view>
      <view class="settings-list">
        <view class="settings-item">
          <text>系统通知</text>
          <view class="item-right">
            <u-switch v-model="notificationSettings.system"></u-switch>
          </view>
        </view>
        <view class="settings-item">
          <text>回忆提醒</text>
          <view class="item-right">
            <u-switch v-model="notificationSettings.memories"></u-switch>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 其他设置 -->
    <view class="settings-group">
      <view class="group-title">其他设置</view>
      <view class="settings-list">
        <view class="settings-item" @click="checkUpdate">
          <text>检查更新</text>
          <view class="item-right">
            <text class="desc">当前版本 1.0.0</text>
            <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          </view>
        </view>
        <view class="settings-item" @click="navigateTo('about')">
          <text>关于我们</text>
          <view class="item-right">
            <u-icon name="arrow-right" color="#999" size="28"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      privacySettings: {
        albumPrivate: true,
        allowShare: true,
        watermark: false
      },
      storageSettings: {
        autoBackup: true
      },
      notificationSettings: {
        system: true,
        memories: true
      }
    }
  },
  methods: {
    navigateTo(page) {
      // 处理页面跳转
      uni.showToast({
        title: `跳转到${page}页面`,
        icon: 'none'
      });
    },
    clearCache() {
      uni.showModal({
        title: '提示',
        content: '确定要清除缓存吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '正在清理...'
            });
            
            setTimeout(() => {
              uni.hideLoading();
              uni.showToast({
                title: '清理完成',
                icon: 'success'
              });
            }, 1500);
          }
        }
      });
    },
    checkUpdate() {
      uni.showLoading({
        title: '检查更新中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: '已是最新版本',
          icon: 'none'
        });
      }, 1500);
    }
  }
}
</script>

<style>
.settings-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 20rpx 0;
}

.settings-group {
  margin-bottom: 20rpx;
}

.group-title {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  color: #666;
}

.settings-list {
  background-color: #fff;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1px solid #f5f5f5;
}

.settings-item:last-child {
  border-bottom: none;
}

.settings-item text {
  font-size: 28rpx;
  color: #333;
}

.item-right {
  display: flex;
  align-items: center;
}

.desc {
  font-size: 26rpx;
  color: #999;
  margin-right: 10rpx;
}

/* Switch 样式调整 */
:deep(.u-switch) {
  margin-left: 10rpx;
}
</style> 